<template>  
  <div class="container">  
    <!-- <div class="sidebar">  
      <el-input placeholder="请输入关键字搜索" v-model="searchKey" />  
      <el-tree :data="treeData" :props="defaultProps" class="letree"></el-tree>  
    </div>   -->
    <div class="main">  
      <div class="header">  
        <el-button type="primary" @click="add">新建</el-button>  
        <el-button type="success" @click="importData">导入</el-button>  
        <el-button type="warning" @click="edit">编辑</el-button>  
        <el-select v-model="selectedFilter" placeholder="请选择状态" style="width: 200px;">  
          <el-option label="启用" value="enabled"></el-option>  
          <el-option label="禁用" value="disabled"></el-option>  
        </el-select>  
        <el-input placeholder="请输入关键字搜索" v-model="searchTable" style="width: 200px;"/>  
        <el-button type="info" @click="query">查询</el-button>  
        <el-button type="info" @click="reste">重置</el-button>  
      </div>  
      <el-table :data="tableData" border class="eltable">  
        <el-table-column prop="post_id" label="岗位编号" width="150"></el-table-column>  
        <el-table-column prop="post_code" label="岗位编码" ></el-table-column>  
        <el-table-column prop="post_name" label="岗位名称" ></el-table-column>  
        <el-table-column prop="post_sort" label="岗位排序" ></el-table-column>   
        <el-table-column prop="post_create_time" label="创建时间" ></el-table-column>  
        <el-table-column prop="post_status" label="启用" width="120">  
          <template #default="{ row }">  
            <el-switch v-model="row.post_status" active-text="是" inactive-text="否" @change="handleSwitchChange(row)" ></el-switch>  
          </template>  
        </el-table-column>  
        <el-table-column label="操作" width="120">  
          <template #default="{ row }">  
            <el-button type="text" @click="editRow(row)">编辑</el-button>  
            <el-button type="text" @click="deleteRow(row)">删除</el-button>  
          </template>  
        </el-table-column>  
      </el-table>  
      <el-pagination  
        @current-change="handleCurrentChange"  
        :current-page="currentPage"  
        :page-size="pageSize"  
        :total="totalItems"  
        layout="total, prev, pager, next, jumper">  
      </el-pagination>  
    </div>  
  </div>  
   
  <el-dialog v-model="dialogVisible" title="添加岗位" width="660" :before-close="handleClose">
  <el-form :model="form" class="demo-form-inline">
    <div class="form-row">
      <el-form-item label="岗位名称" :label-width="formLabelWidth">
        <el-input 
          v-model="form.post_name" 
          placeholder="请输入岗位名称" 
          clearable
        ></el-input>
      </el-form-item>
      
      <el-form-item label="岗位编码" :label-width="formLabelWidth">
        <el-input 
          v-model="form.post_code" 
          placeholder="请输入编码名称" 
          clearable
        ></el-input>
      </el-form-item>

      <el-form-item label="岗位顺序" :label-width="formLabelWidth">
        <el-input 
          v-model="form.post_sort" 
          :placeholder="0" 
          type="number"
          clearable
        ></el-input>
      </el-form-item>
    </div>

    <el-form-item label="备注" :label-width="formLabelWidth">
      <el-input 
        v-model="form.post_notes" 
        placeholder="请输入内容" 
        type="textarea"
        :rows="3"
      ></el-input>
    </el-form-item>
  </el-form>

  <div class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="addqr">确 定</el-button>
  </div>
</el-dialog>
<el-dialog v-model="dialogVisible1" title="修改岗位" width="660" :before-close="handleClose">
  <el-form :model="form" class="demo-form-inline">
    <div class="form-row">
      <el-form-item label="岗位名称" :label-width="formLabelWidth">
        <el-input 
          v-model="form.post_name" 
          placeholder="请输入岗位名称" 
          clearable
        ></el-input>
      </el-form-item>
      
      <el-form-item label="岗位编码" :label-width="formLabelWidth">
        <el-input 
          v-model="form.post_code" 
          placeholder="请输入编码名称" 
          clearable
        ></el-input>
      </el-form-item>

      <el-form-item label="岗位顺序" :label-width="formLabelWidth">
        <el-input 
          v-model="form.post_sort" 
          :placeholder="0" 
          type="number"
          clearable
        ></el-input>
      </el-form-item>
    </div>

    <el-form-item label="备注" :label-width="formLabelWidth">
      <el-input 
        v-model="form.post_notes" 
        placeholder="请输入内容" 
        type="textarea"
        :rows="3"
      ></el-input>
    </el-form-item>
  </el-form>

  <div class="dialog-footer">
    <el-button @click="dialogVisible1 = false">取 消</el-button>
    <el-button type="primary" @click="upqr">确 定</el-button>
  </div>
</el-dialog>
</template>  

<script>  
import axios from 'axios';
import { ref } from 'vue';  

export default {  
  setup() {  
    const userId = localStorage.getItem('userId');
    const searchKey = ref('');  
    const treeData = ref([]);  
    const defaultProps = {  
      children: 'children',  
      label: 'label',  
    };  

    const tableData = ref([]);  

    const selectedFilter = ref('');  
    const searchTable = ref('');  
    const currentPage = ref(1);  
    const pageSize = ref(2);  
    const totalItems = ref(3);  
    const dialogVisible = ref(false);
    const dialogVisible1 = ref(false);
    const form = ref({
      post_id: '',
      post_code: '', // 岗位编码
      post_name: '', // 岗位名称
      post_sort: '', // 岗位排序
      post_notes: '', // 备注
    });
    function qk(){
      form.value.post_code = '';
      form.value.post_name = '';
      form.value.post_sort = '';
      form.value.post_notes = '';
    }

    function sx(){
      axios.get(`http://localhost:5084/api/Post/GetFYPost?PageNumber=${currentPage.value}&PageSize=${pageSize.value}`)
        .then(function (response) {
          console.log(response.data);
          totalItems.value = response.data.zon;
          tableData.value = response.data.post.map(item=>({
            ...item,
            post_status:item.post_status===1,// 1 -> true, 0 -> false
          }));
          
        })
        .catch(function (error) {
          console.error('错误:', error);
        })
    }
    sx();
    const add = () => {  
      // 添加逻辑  
      dialogVisible.value=true;
    };  
    const addqr = () => {  
      const requestData = {
        post_code: form.value.post_code,
        post_name: form.value.post_name,
        post_sort: form.value.post_sort,
        post_notes: form.value.post_notes,
        post_create_by: userId,
      };

      console.log('请求数据:', requestData); // 调试
      axios.post('http://localhost:5084/api/Post/AddPost', requestData)  
        .then(function (response) { 
          console.log(response.data);
          if (response.data) {  
             ElMessage.error("增加成功");
            qk();
            sx();
            dialogVisible.value = false;
          }
         
        })
        .catch(function (error) {  
          console.error('错误:', error);  
        })
    };
    const upqr = () => {
      const requestData = {
        post_id: form.value.post_id,
        post_code: form.value.post_code,
        post_name: form.value.post_name,
        post_sort: form.value.post_sort,
        post_notes: form.value.post_notes,
        post_update_by: userId,
      };
      axios.put(`http://localhost:5084/api/Post/UpPost`, requestData)  
        .then(function (response) {
          console.log(response.data);
          if (response.data) {  
             ElMessage.error("修改成功");
            qk();
            sx();
            dialogVisible1.value = false;
          }
        }).catch(function (error) { 
          console.error('错误:', error);
        })
      
    };
    const handleSwitchChange=(row)=>{
      const newStatus = row.post_status ? 1 : 0;
      axios.put(`http://localhost:5084/api/Post/UPstatus?id=${row.post_id}&status=${newStatus}`)
        .then(response => {
          console.log('状态更新成功:', response);
          
        })
        .catch(error => {
          console.error('状态更新失败:', error);
          // 如果更新失败，你可能需要重置开关的状态  
          /// 还原状态  
        })
    }
    const edit = () => {  
      // 编辑逻辑 
    };  

    const importData = () => {  
      // 导入逻辑  
    };  

    const query = () => {  
      // 查询逻辑  
      console.log('Querying with:', searchTable.value);  
      const status = selectedFilter.value === 'enabled' ? 1 : selectedFilter.value === 'disabled' ? 0 : '';
      // 确保 searchTable 是字符串
      const keyword = String(searchTable.value);
      console.log('查询参数:', {status,keyword,});
      axios.get(`http://localhost:5084/api/Post/MHCX?PageNumber=${currentPage.value}&PageSize=${pageSize.value}&status=${status}&name=${keyword}`)  
        .then(response => { 
          console.log(response.data);
          if (response.data) {
            totalItems.value = response.data.zon;
            tableData.value = response.data.post.map(item => (
              { ...item,
                post_status: item.post_status === 1, // 1 -> true, 0 -> false
              }
            ))
          }
        }).catch(error => { 
          console.error('错误:', error);
        })
    };  
    const reste=() => {
      selectedFilter.value = '';
      searchTable.value = '';
      sx();
    }
    const editRow = (row) => {  
      // 编辑行逻辑  
      console.log('Editing row:', row);
      dialogVisible1.value=true;
      form.value = row;
    };  

    const deleteRow = (row) => {  
      // 删除行逻辑  
      console.log('Deleting row:', row);  
      axios.delete(`http://localhost:5084/api/Post/DePost?id=${row.post_id}`)
        .then(function (response) {
          if (response.data) {
             ElMessage.error("删除成功");
            sx();
          }
        }).catch(function (error) {  
          console.error('错误:', error);  
        })
    };  

    const handleCurrentChange = (page) => {  
      currentPage.value = page;  
      // 分页逻辑  
      console.log('Current page:', page);  
      sx();
    };  

    // 确保所有函数都被返回  
    return {  
      searchKey,  
      treeData,  
      defaultProps,  
      tableData,  
      selectedFilter,  
      searchTable,  
      currentPage,  
      pageSize,  
      totalItems,  
      add,  
      edit,  
      importData,  
      query,  
      editRow,  
      deleteRow,  
      handleCurrentChange,  
      dialogVisible,
      dialogVisible1,
      form,
      addqr,
      upqr,
      userId,
      handleSwitchChange,
      reste
    };  
  },  
};  
</script>  

<style>  
.container {  
  display: flex;  
  gap: 20px;
  height: 87vh;
}  

.sidebar {  
  height: 100%;
  width: 30vh;
}  

.main {  
  width: 80%;
  flex: 1;  
  height: 100%;
}  

.header {  
  display: flex;  
  align-items: center;  
  gap: 10px;  
  margin-bottom: 20px;
}  
.eltable{
  height: 90%;
}
.letree{
  height: 97%;
}
</style>